import React, { useEffect, useState } from "react";
import TodoItem from "./TodoItem";
// import { StateProps } from "./Todo";
// import { MyContext } from "./MyProvider";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../store/reducer";
import { initAction } from "../store/action";

const style = {
  marginTop: "20px",
};

export interface StateProps {
  id: number;
  text: string;
  isFinished: boolean; //是否已完成
}

//props:IProps 解构为{ TodoList }: IProps
const TodoList = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    console.log(33333333333);
    console.log(JSON.parse(window.localStorage.getItem("data") || "[]"));
    dispatch(
      initAction(JSON.parse(window.localStorage.getItem("data") || "[]"))
    );
  }, [dispatch]);

  const state = useSelector((state: RootState) => state);
  //    使用useSelector时，要给state做类型推断  在reducer中  export type RootState =ReturnType<typeof reducer>

  // window.localStorage.setItem("data", JSON.stringify(state));
  // const getItem = JSON.parse(window.localStorage.getItem("data") || "[]");
  // console.log(typeof getItem); //object
  // console.log(getItem);

  //遍历TodoItem
  const todolistdom = state.map((item: any, index: number) => (
    <TodoItem key={item.id} todo={item} index={index} />
  ));

  return (
    <div className="todo-list" style={style}>
      {todolistdom}
    </div>
  );
};

export default TodoList;
